<template>
  <CompOperate
    :field="field"
    :designer="designer"
    :design-state="designState"
    :parent-list="parentList"
    :parent-widget="parentWidget"
    :sub-form-row-id="subFormRowId"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :index-of-parent-list="indexOfParentList"
    :display-style="field.options.displayStyle"
  >
    <div class="scene-waiting-widget clearfix" :style="getStyle('area')" :key="widgetKey">
      <div class="list-header clearfix">
        <div class="item-win"><span>窗口</span></div>
        <div class="item-curr">
          <span v-if="optionsInfo['viewMode']===1">采血</span>
          <span v-else>当前患者</span>
        </div>
        <div class="item-wait"><span>准备</span></div>
        <div class="item-pass"><span>过号</span></div>
      </div>
      <!--  采血视图    -->
      <div :class="['list-body','clearfix',`view-mode-${optionsInfo['viewMode']}`]"  v-if="optionsInfo.viewMode===1">
        <div :class="['list-info', `list-mode-${optionsInfo['showRowNums']}`]" :key="waitKey">
          <div class="list-row" v-for="(item, index) in waitingPatientInfos" :key="`${widgetKey}_${index}`">
            <div class="item-win">
              <div class="wrap">
                <ScrollX>{{ getColContent(item,'treatmentRoomName') || "\u00a0" }} </ScrollX>
              </div>
            </div>
            <div class="item-curr">
              <div class="wrap">
                <ScrollX>{{ getCurrentPatient(item) || "\u00a0" }}</ScrollX>
              </div>
            </div>
          </div>
        </div>
        <div class="wait-list" :key="waitKey">
          <div class="wait-wrapper" :key="'wait-'+widgetKey">
            <vue-seamless-scroll
              class="content"
              :hoverStop="false"
              :data="waitList"
              @ScrollEnd="handleScrollEnd"
              :class-option="classOptionPatient()"
              ref="scroll-current"
            >
            <ul class="clearfix">
              <li v-for="(row, index) in waitList" :key="index">
                {{ row.orderNo || '\u00a0' }}&nbsp;{{ row.patientName || '\u00a0' }}
              </li>
            </ul>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="pass-list">
          <div class="wait-wrapper">
            <vue-seamless-scroll
              class="content"
              :hoverStop="false"
              :data="passList"
              @ScrollEnd="handleScrollEnd"
              :class-option="passOptionPatient()"
            >
            <ul class="clearfix">
              <li v-for="(row, index) in passList" :key="index">
                {{ row.orderNo || '\u00a0' }}&nbsp;{{ row.patientName || '\u00a0' }}
              </li>
            </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <!--  输液视图    -->
      <div :class="['list-body','clearfix',`view-mode-${optionsInfo['viewMode']}`]" v-else>
        <div :class="['list-info', `list-mode-${optionsInfo['showRowNums']}`]" :key="waitKey" >
          <div class="list-row" v-for="(item, index) in waitingPatientInfos" :key="index">
            <div class="item-win">
              <div class="wrap">
                <ScrollX>{{ getColContent(item,'treatmentRoomName') || "\u00a0" }} </ScrollX>
              </div>
            </div>
            <div class="item-curr">
              <div class="wrap">
                <ScrollX>{{ getCurrentPatient(item) || "\u00a0" }}</ScrollX>
              </div>
            </div>
            <div class="item-wait">
              <div class="wrap">
                <template v-for="(row) in waitItem(item)">
                  {{ row.orderNo || '\u00a0' }}&nbsp;{{ row.patientName || '\u00a0' }}
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="pass-list">
          <div class="wait-wrapper">
            <vue-seamless-scroll
              class="content"
              :hoverStop="false"
              :data="passList"
              @ScrollEnd="handleScrollEnd"
              :class-option="passOptionPatient()"
            >
              <ul class="clearfix">
                <li v-for="(row, index) in passList" :key="index">
                  {{ row.orderNo || '\u00a0' }}&nbsp;{{ row.patientName || '\u00a0' }}
                </li>
              </ul>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {v4 as uuid} from "uuid";
import {pxToVw} from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import vueSeamlessScroll from "vue-seamless-scroll";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import {buildParentApi} from "@/utils/designer/util";

let buildParent = buildParentApi();
export default {
  name: "scene-wait-blood-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    ScrollX,
    CompOperate,
    vueSeamlessScroll,
  },

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },

    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },

    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi(),
    },
  },

  data() {
    return {
      widgetKey: uuid(),
      waitKey: uuid(),
      optionsInfo: Object(),
    };
  },

  computed: {
    //生成唯一的字符串
    getOnlyId() {
      return function () {
        return uuid();
      };
    },
    // 滚动配置项
    passOptionPatient() {
      return function () {
        const {passArea = {}} = this.optionsInfo;
        const {scroll = false, step = 1, minLens = 7} = passArea
        let fontSize = parseFloat(document.documentElement.style.fontSize);
        let scale = (fontSize / 19.2);
        return {
          step: (fontSize / 19.2) * step * scale, // 数值越大速度滚动越快
          hoverStop: false,
          openTouch: false,
          direction: 1, // 0向下 1向上 2向左 3向右
          limitMoveNum: (scroll ? minLens : 9999), // 开始无缝滚动的数据量
        };

      }
    },
    // 滚动配置项
    classOptionPatient() {
      return function () {
        const {waitArea = {}} = this.optionsInfo;
        const {scroll = false, step = 1, minLens = 15} = waitArea
        let fontSize = parseFloat(document.documentElement.style.fontSize);
        let scale = (fontSize / 19.2);
        return {
          step: (fontSize / 19.2) * step * scale, // 数值越大速度滚动越快
          hoverStop: false,
          openTouch: false,
          direction: 1, // 0向下 1向上 2向左 3向右
          limitMoveNum: (scroll ? minLens : 9999), // 开始无缝滚动的数据量
        };

      }
    },
    // 温馨提示的滚动
    classOptionTips() {
      let {openScroll, waitingNumber, waitingVisitStep} =
        this.optionsInfo;
      return {
        step: [1, 1.5, 2, 2.5, 3][waitingVisitStep - 1], // 数值越大速度滚动越快
        hoverStop: true,
        limitMoveNum: openScroll ? waitingNumber : 999999, // 开始无缝滚动的数据量 this.dataList.length
        direction: 2, // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
      };
    },

    // 拼接显示具体内容
    getColContent() {
      return function (val, key) {
        const self = this;
        let {mergeColInfo, registerObjNameKey, roomNameKey, deptNameKey} =
        self.optionsInfo || Object();
        switch (key) {
          // 诊室&诊室简称
          case "treatmentRoomName":
            if (
              !!mergeColInfo &&
              !!mergeColInfo[1] &&
              !!mergeColInfo[1].length &&
              mergeColInfo[1].length === 2
            ) {
              let mergeInfo = `${val[roomNameKey] || val[key] || "\u00a0"} ${
                val[registerObjNameKey] || "\u00a0"
              }`;
              return self.$lodash.trim(mergeInfo);
            } else {
              return val[roomNameKey] || val[key] || "\u00a0";
            }
          case "registerObjNames":
            return val[registerObjNameKey] || val[key];
          case "deptName":
            return val[deptNameKey] || val[key];
          default:
            return val[key] || "\u00a0";
        }
      };
    },



    // 模板的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Array();
        let Obj = Object();
        switch (val) {
          case "list":
            Reflect.set(Obj, "fontSize", pxToVw(info.headFontSize));
            break;
          case "area":
            Reflect.set(Obj, "height", pxToVw(info.contentHeight));
            break;
        }
        return Obj;
      };
    },

    // 过号患者信息
    passList() {
      let devType = this.devType;
      let patientList = this.$store.getters["getPassPatientInfo"];
      let {scroll = 1, minLens = 7} = this.optionsInfo;
      let list = devType ? patientList.apiData : patientList.mockData;
      if (!scroll) {
        return list.slice(0, minLens);
      }
      return list;
    },

    // 当前就诊的患者|| 医生暂停接诊
    getCurrentPatient() {
      return function (val) {
        /**
         * 在线状态 0在线 1暂停 2退出
         **/
        let type = parseInt(val.onlineStatus);
        switch (type) {
          case 0:
          case 2:
            if (!!val.treatingPatient && !!val.treatingPatient.length) {
              let currentPatient = Array();
              val.treatingPatient.forEach((item) => {
                let orderNo = item?.orderNo;
                let patientOrderNoInfo = "";
                if (!!orderNo) {
                  patientOrderNoInfo = `${item.orderNo || "\u00a0"}`;
                }
                let temp = `${patientOrderNoInfo} ${
                  item.patientName || "\u00a0"
                }`;
                currentPatient.push(temp);
              });
              return this.$lodash.join(currentPatient, " ");
            } else {
              return "\u00a0";
            }
          case 1:
            return "暂停接诊";
        }
      };
    },
    // 当前就诊的患者|| 医生暂停接诊
    waitItem() {
      return function (row) {
        const arr = row.waitPatientList || [];
        const lists =this.$lodash.cloneDeep(arr);
        return lists.length?lists.splice(0,1):[];
      };
    },
    // 列表的队列的患者
    waitingPatientInfos() {
      let devType = this.devType;
      let {showRowNums} = this.optionsInfo;
      let queuePatientList = this.$store.getters["getWaitingPatientInfo"];
      let listInfo = devType
        ? queuePatientList.apiData
        : queuePatientList.mockData;
      if (listInfo.length > showRowNums) {
        return listInfo.slice(0, showRowNums);
      } else {
        let fill = new Array(showRowNums - listInfo.length).fill({});
        return [...listInfo, ...fill];
      }
    },
    waitList() {
      const {waitPatientNumber} = this.optionsInfo || {};
      const all = this.$store.getters["getWaitingPatientInfo"];
      const data = this.devType? all.apiData: all.mockData;
      const waits =this.$lodash.cloneDeep(data)
      const sum = this.$lodash.map(waits, "waitPatientList");
      const lists = this.$lodash.flattenDeep(sum);
      let uniqByArr = this.$lodash.uniqBy(lists, 'queuingId');
      return uniqByArr.splice(0,waitPatientNumber);
    },
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 等待候诊滚动结束
    handleScrollEnd(e, row) {
      const self = this;
      if (self.$refs[`scroll-${row.workerId}`]) {
        self.$nextTick(() => {
          self.$refs[`scroll-${row.workerId}`][0] &&
          self.$refs[`scroll-${row.workerId}`][0].reset();
        });
      }
    },

    // 接收父组件传递过来的数据
    async executeMethod(key, data) {
      switch (key) {
        case "patientListInfo":
          let patientList = this.$lodash.cloneDeep(data);
          await this.$store.dispatch("setWaitingPatientInfo", patientList);
          this.waitKey = uuid();
          break;
        case "passPatientInfo":
          await this.$store.dispatch("setPassPatientInfo",this.$lodash.cloneDeep(data));
          break;
      }
    },
  },

  watch: {
    field: {
      handler: function (val) {
        this.widgetKey = uuid();
        let key = val.options.config;
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
  clear: both;
}

.clearfix {
  zoom: 1;
  overflow: hidden;
}

.scene-waiting-widget {
  background-color: transparent;
  height: 100%;
  box-sizing: border-box;
  padding: 25px 30px;
  overflow: hidden;

  * {
    box-sizing: border-box;
  }

  .list-header {
    display: flex;
    align-items: center;
    justify-content: center;

    & > div {
      flex: 1;

      span {
        height: 150px;
        background: #7DF1FE;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 4px;
        font-size: 80px;
        color: #00051F;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &.item-curr {
        span{
          color: #fff;
          background: linear-gradient(180deg, #00ADF9 0%, #00B5FE 100%);
        }
      }

      &:last-child {
        span {
          margin-right: 0;
        }
      }
    }
  }

  .list-body {
    display: flex;
    height: calc(100% - 150px);
    padding: 18px 0;

    & > div {
      height: 100%;
      flex: 1;
      min-width: 0;
      &.list-info {
        flex: 2;
        min-width: 0;
        .list-row {
          padding-bottom: 18px;
          display: flex;
          align-items: center;
          justify-content: center;

          & > div {
            flex: 1;
            min-width: 0;
            .wrap {
              height: 176px;
              background: linear-gradient(135deg, #00477D 0%, #005DB1 100%);
              border-radius: 10px;
              font-size: 80px;
              color: #94F7FC;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 4px;
            }

            &:last-child {
              .wrap {
                margin-right: 0;
              }
            }
          }
        }
        &.list-mode-4{
          .list-row {
            padding-bottom: 12px;
            & > div {
              .wrap {
                height: 132px;
                font-size: 60px;
              }
            }
          }
        }
      }

      .wait-wrapper {
        height: 100%;
        border-radius: 10px;
        overflow: hidden;
        background: linear-gradient(135deg, #00477D 0%, #005DB1 100%);
      }

      &.wait-list {
        padding-left: 4px;

        li {
          float: left;
          width: 50%;
          font-weight: 500;
          font-size: 38px;
          color: #FFFF00;
          padding: 0 10px;
          text-align: center;
          line-height: 80px;
          height: 80px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      &.pass-list {
        padding-left: 4px;

        li {
          font-weight: 500;
          font-size: 38px;
          color: #FFFF00;
          padding: 0 10px;
          text-align: center;
          line-height: 80px;
          height: 80px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    &.view-mode-2{
      .list-info {
        flex: 3;
      }
      .list-row  div.item-wait .wrap{
        color: #FFFF00;
      }
    }
  }
}
</style>
